{
 "cells": [
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "Basic example for highstock module in python-highcharts\n",
    "===============================\n",
    "\n",
    "As in highcharts, datasets need to be input using the \"add_data_set\" or \"add_data_from_jsonp\" methods.\n",
    "Options can be either set by \"set_options\" method as showing here or\n",
    "construct a option dictionary object and input using \"set_dict_options\" method (recommended).\n",
    "\n",
    "In highstock, the (new) feature \"navigator\" is automatically added into the bottom of the chart\n",
    "based on the first dataset added into chart. But the dataset used in navigator can be changed using \n",
    "add_navi_series and add_navi_series_from_jsonp methods:\n",
    "\n",
    "1. add_navi_series(data, series_type=\"line\", **kwargs)\n",
    "\t1. data is the dataset added into the navigator\n",
    "\t2. series_type is the plot type for navigator\n",
    "\t3. kwargs are for parameters in series \n",
    "        (for detail please ref to highcharts API: http://api.highcharts.com/highcharts#)\n",
    "\n",
    "2. add_navi_series_from_jsonp(data_src=None, data_name='json_data', series_type=\"line\", **kwargs)\n",
    "    add dataset from the data_src using jsonp. It is converted to jquery function \"$.getJSON\" in javascript environment\n",
    "    1. data_src is the url (https) for the dataset\n",
    "    2. data_name is the variable name of dataset. This name is used for javascript environment (not in python)\n",
    "    3. series_type( default: \"line\") is the type of plot this dataset will be presented\n",
    "    4. kwargs are for parameters in series or plotOptions \n",
    "        (for detail please ref to highcharts API: http://api.highcharts.com/highcharts#)\n",
    "\n",
    "In most examples, add_data_from_jsonp method is used to show a similar practice in Highstock Demos \n",
    "\n",
    "The following example is from Highstock Demos\n",
    "Single line series: http://www.highcharts.com/stock/demo/basic-line"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 1,
   "metadata": {
    "collapsed": false
   },
   "outputs": [
    {
     "data": {
      "text/html": [
       "<iframe style=\"border:0;outline:none;overflow:hidden\" srcdoc=\"&lt;!DOCTYPE html&gt;\n",
       "&lt;html lang=&quot;en&quot;&gt;\n",
       "    &lt;head&gt;\n",
       "        &lt;meta charset=&quot;utf-8&quot; /&gt;\n",
       "        &lt;link href=&quot;https://www.highcharts.com/highslide/highslide.css&quot; rel=&quot;stylesheet&quot; /&gt;\n",
       "        &lt;script type=&quot;text/javascript&quot; src=&quot;https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js&quot;&gt;&lt;/script&gt;\n",
       "        &lt;script type=&quot;text/javascript&quot; src=&quot;https://code.highcharts.com/stock/highstock.js&quot;&gt;&lt;/script&gt;\n",
       "        &lt;script type=&quot;text/javascript&quot; src=&quot;https://code.highcharts.com/stock/modules/exporting.js&quot;&gt;&lt;/script&gt;\n",
       "        &lt;script type=&quot;text/javascript&quot; src=&quot;https://code.highcharts.com/highcharts-more.js&quot;&gt;&lt;/script&gt;\n",
       "    &lt;/head&gt;\n",
       "    &lt;body style=&quot;margin:0;padding:0&quot;&gt;\n",
       "                &lt;div id=&quot;container&quot; style=&quot;&quot;&gt;Loading....&lt;/div&gt;\n",
       "\n",
       "\n",
       "    &lt;script&gt;\n",
       "        $(function(){\n",
       "\n",
       "\n",
       "            $.getJSON(&quot;http://www.highcharts.com/samples/data/jsonp.php?filename=aapl-c.json&amp;callback=?&quot;, function (json_data)\n",
       "                {\n",
       " \n",
       "\n",
       "\n",
       "\n",
       "\n",
       "            Highcharts.setOptions({&quot;lang&quot;: {}, &quot;global&quot;: {}});\n",
       "            var option = {&quot;loading&quot;: {}, &quot;subtitle&quot;: {}, &quot;title&quot;: {&quot;text&quot;: &quot;AAPL Stock Price&quot;}, &quot;series&quot;: {}, &quot;labels&quot;: {}, &quot;yAxis&quot;: {}, &quot;chart&quot;: {&quot;renderTo&quot;: &quot;container&quot;}, &quot;tooltip&quot;: {}, &quot;plotOptions&quot;: {}, &quot;credits&quot;: {&quot;enabled&quot;: false}, &quot;colors&quot;: {}, &quot;scrollbar&quot;: {}, &quot;xAxis&quot;: {}, &quot;exporting&quot;: {}, &quot;rangeSelector&quot;: {&quot;selected&quot;: 1}, &quot;navigator&quot;: {}, &quot;navigation&quot;: {}, &quot;legend&quot;: {}};\n",
       "\n",
       "            var data = [{&quot;data&quot;: json_data, &quot;type&quot;: &quot;line&quot;, &quot;name&quot;: &quot;AAPL&quot;, &quot;tooltip&quot;: {&quot;valueDecimals&quot;: 2}}]\n",
       "            option.series = data;\n",
       "\n",
       "\n",
       "            var chart = new Highcharts.StockChart(option);\n",
       "\n",
       "\n",
       "\n",
       "\n",
       "            });\n",
       " \n",
       "\n",
       "\n",
       "        \n",
       "    });\n",
       "        &lt;/script&gt;\n",
       "\n",
       "    &lt;/body&gt;\n",
       "&lt;/html&gt;\" height=520 width=820></iframe>"
      ],
      "text/plain": [
       "<highcharts.highstock.highstock.Highstock at 0x7f544e809c90>"
      ]
     },
     "execution_count": 1,
     "metadata": {},
     "output_type": "execute_result"
    }
   ],
   "source": [
    "from highcharts import Highstock\n",
    "from highcharts.highstock.highstock_helper import jsonp_loader\n",
    "H = Highstock()\n",
    "\n",
    "data_url = 'http://www.highcharts.com/samples/data/jsonp.php?filename=aapl-c.json&callback=?'\n",
    "H.add_data_from_jsonp(data_url, 'json_data', 'line', 'AAPL', tooltip = {\n",
    "    'valueDecimals': 2\n",
    "    }\n",
    ")\n",
    "\n",
    "options = {\n",
    "    'rangeSelector' : {\n",
    "            'selected' : 1\n",
    "        },\n",
    "\n",
    "    'title' : {\n",
    "        'text' : 'AAPL Stock Price'\n",
    "    },\n",
    "}\n",
    "H.set_dict_options(options)\n",
    "\n",
    "H"
   ]
  }
 ],
 "metadata": {
  "kernelspec": {
   "display_name": "Python 2",
   "language": "python",
   "name": "python2"
  },
  "language_info": {
   "codemirror_mode": {
    "name": "ipython",
    "version": 2
   },
   "file_extension": ".py",
   "mimetype": "text/x-python",
   "name": "python",
   "nbconvert_exporter": "python",
   "pygments_lexer": "ipython2",
   "version": "2.7.6"
  }
 },
 "nbformat": 4,
 "nbformat_minor": 0
}
